<template>
	<view>
		
		<view  v-if="!order_info">
			<!-- <button >点击扫码核销</button> -->
			<view style="margin-top: 120rpx;">
				<u-empty
				        mode="car"
						text="暂无核销商品"
				        icon="https://cdn.uviewui.com/uview/empty/data.png" />
			</view>
			</u-empty>
			<view class="bottom" >
				<view @click="writeOff()" class="bottom-btn" style="background-color: #3C9CFF;display: flex;align-items: center;justify-content: center;">
					<span style="margin-right: 5rpx;">点击扫码核销</span> <u-icon name="scan" size="20" color="white"></u-icon>
				</view>
			</view>
		</view>
		<view v-else>
			<template>
				<view class="page">
					<view class="product-num">
						<view>共{{product_list.length}}件商品 <span style="color: #E93323;font-weight: bold;margin: 0 5rpx;" v-if='order_info'>￥{{(order_info.amount/100).toFixed(2)}}</span></view>
						<view>来自<span style="color: #E93323;font-weight: bold;margin: 0 5rpx;">{{order_info.nickname}}</span>用户租赁</view>
					</view>
					<u-alert title="待核销" type = "warning" v-if="!is_hexiao"></u-alert>
					<u-alert title="核销成功" type ="success" v-else></u-alert>
					<u-line></u-line>
					<view class="product-list">
						<view class="product-item" v-for="item,index in product_list" :key="item._id">
							<image class="banner" :src="item.image" mode="aspectFill"></image>
							<view style="display: flex;justify-content: space-between;flex-grow: 1;">
								<view
									style="display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;">
									<view class="over-hide">
										<view>{{item.title}}</view>
									</view>
									<view style="color: #999999;font-size: 26rpx;">{{item.classification_name}}</view>
									<view style="color: #E93323;font-size: 30rpx;">￥{{item.price}}</view>
								</view>
								<view class="number"> × {{item.number}}</view>
							</view>
						</view>
					</view>
					<view class="bottom-height"></view>
					<view class="bottom">
						<view v-if="!is_load" @click="writeOff_confirm" class="bottom-btn">
							确认核销
						</view>
						<view v-else @click="writeOff"  class="bottom-btn jinyong">
							继续核销
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			// if (this.order_id) this.getProductList();
		},
		data() {
			return {
				order_id: null,
				// order_id:"NO24060712000353816586546",
				product_list: [],
				show: false,
				write_status:1,
				write_info:null,
				order_info:null,
				is_load:false,
				is_hexiao:false,
			}
		},
		methods: {

			writeOff() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: (res) => {
						this.is_load = false
						this.is_hexiao = false
						this.write_info = JSON.parse(res.result)
						this.order_id = this.write_info.out_trade_no;
						this.write_status = this.write_info.write_status
						if (this.order_id) this.getProductList();
					}
				});
			},
			async writeOff_confirm() {
				if(this.is_load) {
					uni.showToast({
						title:'请勿频繁操作',
						icon:'none'
					})
					return
				}
				this.is_load = true
				await vk.callFunction({
					url: 'client/pages/writeoff/kh/writeoff_edit',
					title: '请求中...',
					data: {
						order_id: this.order_id,
						status:this.write_status
					},
					success:(res)=>{
						console.log('res', res)
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						this.is_hexiao = true
					},
					complete:(res)=>{
						// this.is_load = false
					}
				})

			},
			async getProductList() {
				let res = await vk.callFunction({
					url: 'client/pages/writeoff/kh/get_merchandise_byorderid',
					title: '请求中...',
					data: {
						order_id: this.order_id
					}
				});
				this.order_info = res.data
				this.product_list = res.data.product_list
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F5F5F5;
	}
	.bottom-height {
		height: calc(130rpx + env(safe-area-inset-bottom));
	}

	.page {
		background-color: #F5F5F5;
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}

	.product-num {
		padding: 30rpx;
		font-size: 28rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.product-list {
		background-color: white;

		.product-item {
			padding: 30rpx;
			display: flex;

			.banner {
				width: 160rpx;
				height: 160rpx;
				border-radius: 5rpx;

				margin-right: 20rpx;
			}

			.over-hide {
				font-size: 28rpx;
				width: 300rpx; //宽度
				height: 80rpx;
				display: flex;
				align-items: center;

				view {

					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					align-items: center;
					-webkit-box-orient: vertical; //上下垂直

					-webkit-line-clamp: 2; //自定义行数
				}
			}

			.number {
				color: #959595;

			}
		}
	}

	.bottom {
		z-index: 2;
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;

		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;

		.bottom-btn {
			background-color: #E93323;
			color: white;
			border-radius: 100rpx;
			width: 100%;
			padding: 20rpx;
			text-align: center;
			font-size: 30rpx;
		}
		
		.jinyong{
			background-color: #3C9CFF;
			border:1px solid #3C9CFF;
			color: white;
		}
	}
</style>